<template>
	<view class="indexSwiper">
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="item in list" :key="item.id">
						<image :src="item.img" @tap="jumpByPageType(item.url)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view
						class="dots"
						v-for="(swiper, index) in list"
						:class="[currentSwiper >= index ? 'on' : '']"
						:key="index"
					></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
	import { mapState } from 'vuex';
	import { links } from '../../common/mixins.js'
	
	export default {
		name: 'indexSwiper',
		mixins: [ links ],
		props: {
			theData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				currentSwiper: 0,
			}
		},
		computed: {
			...mapState ([
				'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
			]),
			list() {
				let list = JSON.parse(JSON.stringify(this.theData));
				return list.map((item) => {
					let {
						id: id,
						img: img,
						title: title,
						url: url,
						...rest
					} = item;
					img = this.debugSetting.resourcePath + img;
					return { id, img, title, url, rest};
				});
			},
		},
		methods: {
			swiperChange(event) { // 轮播图指示器
				this.currentSwiper = event.detail.current;
			},
		}
	}
</script>

<style lang="scss">
	.indexSwiper {
		.swiper {
			width: 100%;
			margin: 10upx 0 20upx;
			padding-top: 10upx;
			display: flex;
			justify-content: center;
			.swiper-box {
				width: 92%;
				height: 40.7vw;
				overflow: hidden;
				border-radius: 15upx;
				box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
				//兼容ios，微信小程序
				position: relative;
				z-index: 1;
				swiper {
					width: 100%;
					height: 40.7vw;
					swiper-item {
						image {
							width: 100%;
							height: 40.7vw;
						}
					}
				}
				.indicator {
					position: absolute;
					bottom: 20upx;
					left: 20upx;
					background-color: rgba(255, 255, 255, 0.4);
					width: 150upx;
					height: 5upx;
					border-radius: 3upx;
					overflow: hidden;
					display: flex;
					.dots {
						width: 100%;
						&.on {
							background-color: rgba(255, 255, 255, 1);
						}
					}
				}
			}
		}
	}
</style>
